<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第五章动手实践-表单生成器</title>
    <style>
      body{margin-top:20px;}
      .box{font-family:Tahoma,simsun;font-size:12px;border:1px solid #1678BE;display:table;margin:0 auto;}
      .box-head{padding:5px 20px;background-color:#2487C9;color:#fff;font-size:14px;}
      .box-body{padding:10px 20px;}
      .box-body th{font-weight:normal;vertical-align:top;padding-top:5px;}
      .box-body td{padding-top:2px;padding-bottom:8px;}
      .box-body select{font-family:Tahoma,simsun;font-size:12px;padding:2px 5px;cursor:pointer;}
      .box-body label{margin-right:5px;cursor:pointer;}
      .box-body label input{cursor:pointer;}
      .box-body input{vertical-align:middle;font-family:Tahoma,simsun;font-size:12px;}
      .box-body input[type=text]{padding:2px;}
      .box-body input[type=radio]{margin-top:-1px;}
      .box-body input[type=submit]{padding:4px 15px;cursor:pointer;}
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box-head">个人信息</div>
      <div class="box-body">
        <form id="form" action="form.php" method="post"></form>
      </div>
    </div>
    <script src="FormBuilder.js"></script>
    <script>
      var elements = [
        {tag: 'input', text: '姓　　名：', attr: {type: 'text', name: 'user'}},
        {tag: 'input', text: '性　　别：', attr: {type: 'radio', name: 'gender'}, option: {m: '男', w: '女'}},
        {tag: 'input', text: '爱　　好：', attr: {type: 'checkbox', name: 'hobby[]'}, option: {swimming: '游泳', reading: '读书', running: '跑步'}},
        {tag: 'select', text:'住　　址：', attr: {name: 'area'}, option: {'': '--请选择--', bj: '北京', sh: '上海', sz: '深圳'}},
        {tag: 'textarea', text: '自我介绍：', attr: {name: 'introduce', cols:'50', rows: '5'}},
        {tag: 'input', attr: {type: 'submit', value: '提交'}}
      ];
      document.getElementById('form').innerHTML = new FormBuilder(elements).create();
    </script>
     <p><a href="第五章.html">返回上一级</a></p>
  </body>
</html>
